﻿<template>
  <div id = 'bi_content' v-loading = 'loading'>
    <!-- 上部区域 -->
    <div class = 'bi_content_top'>
      <div class = 'bi_content_top_title'>
        <div class = 'bi_content_top_title_icon' title = '返回'
        @click = 'returnBack'><i class = 'iconfont icon-xitongfanhui'></i></div>
        <span class = 'bi_content_top_title_border'></span>
        <div class = 'bi_content_top_title_label'>{{(biDashboardInfo && biDashboardInfo.title) ? biDashboardInfo.title : '仪表板信息'}}</div>
      </div>
      <!-- 右侧显示按钮 -->
      <div class = 'bi_content_top_btns'>
        <el-button type = 'primary' size = 'mini' @click = 'submitForm'>保存</el-button>
        <el-button type = 'primary' size = 'mini' @click = 'previewForm'>预览</el-button>
      </div>
    </div>
    <div class = 'bi_main'>
      <!-- 左边可拖拽的组件 -->
      <div class = 'bi_main_left'>
        <draggable class = 'bi_main_left_icon' tag = 'ul' :list = 'settingsItem'
        v-bind = "{ group: { name: 'echarts_item', pull: 'clone', put: false }, sort: false }">
          <li v-for = "(item, index) in settingsItem" :key = 'index'
          :title = 'item.name'>
            <i :class = "'iconfont ' + item.icon"></i>
          </li>
        </draggable>
      </div>
      <!-- 右侧设置区域 -->
      <div class = 'bi_configContent'>
        <el-tabs stretch v-model = 'currentTabs'>
          <el-tab-pane label = "样式" name = "itemStyle">
            <BiConfig :formItemConfig = 'selectFormItem'></BiConfig>
          </el-tab-pane>
          <el-tab-pane label = "数据" name = "itemData"
          v-if = "selectFormItem && selectFormItem.type !== 'grid' && selectFormItem.type !== 'tabs'">
            <BiData :formItemConfig = 'selectFormItem'></BiData>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间主区域 -->
      <div class = 'bi_settings'>
        <draggable class = 'bi_settings_main'
        v-model = "formData.list" v-bind = "{group: 'echarts_item', sort:true}" @add = "handleEchartItemAdd">
          <template v-for = "(element, index) in formData.list">
            <!-- 栅格布局 -->
            <template v-if = "element.type == 'grid'">
              <div v-if = "element && element.key"  class = "widget-grid-container data-grid" :key = "element.key" style = "position: relative;">
                <el-row class = "widget-grid" type = "flex"
                :class = "{active: selectFormItem.key == element.key}"
                :gutter = "element.options.gutter ? element.options.gutter : 0"
                :justify = "element.options.justify"
                :align = "element.options.align"
                @click.native = "handleSelectFormItem(index)">
                  <el-col v-for = "(col, colIndex) in element.columns" :key = "colIndex" :span = "col.span ? col.span : 0">
                    <div style = "border: 1px dashed #999;">
                      <draggable
                        class = "widget-form-list"
                        v-model = "col.list"
                        v-bind = "{group: 'echarts_item', sort:true}"
                        style = "min-height: 50px;padding-bottom:10px;"
                        @add = "handleFormItemColAdd($event, element, colIndex)">
                        <template>
                          <BiItem v-for = "(el, i) in col.list" :key = "el.key"
                          :element = "el" :select.sync = "selectFormItem" :index = "i" :data = "col"></BiItem>
                        </template>
                      </draggable>
                    </div>
                  </el-col>
                </el-row>
                <el-button title = "删除" style = "bottom: -20px;" @click.stop = "handleFormItemDelete(index)"
                class = "widget-action-delete" v-if = "selectFormItem.key == element.key" circle plain type = "danger">
                  <i class = "iconfont icon-shanchu" ></i>
                </el-button>
              </div>
            </template>
            <!-- tabs标签页时 -->
            <template v-else-if = "element.type == 'tabs'">
              <div v-if = "element && element.key"  class = "tabs-grid" :key = "element.key" style = "position: relative;">
                <el-tabs :type = "element.options.tabType" :stretch = "element.options.stretch" @click.native = "handleSelectFormItem(index)">
                  <el-tab-pane v-for = "(tabItem, tabIndex) in element.tabList" :key = "tabIndex" :label = "tabItem.label">
                    <draggable class = "widget-form-list" v-model = "tabItem.list" filter = "tabs-grid"
                    v-bind = "{group: 'echarts_item', sort: true}"
                    style = "min-height: 50px;"
                    @add = "handleFormItemTabAdd($event, element, tabIndex)">
                      <template v-for = "(el, i) in tabItem.list">
                        <!-- 嵌套有栅格布局时 -->
                        <template v-if = "el.type == 'grid'">
                          <div v-if = "el && el.key"  class = "widget-grid-container data-grid" :key = "el.key" style = "position: relative;">
                            <el-row class = "widget-grid" type = "flex"
                            :class = "{active: selectFormItem.key == el.key}"
                            :gutter = "el.options.gutter ? el.options.gutter : 0"
                            :justify = "el.options.justify"
                            :align = "el.options.align"
                            @click.native.stop = "handleSelectTabsFormItem(index, tabIndex, i)">
                              <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span ? col.span : 0">
                                <div style = "border: 1px dashed #999;">
                                  <draggable
                                  class = "widget-form-list"
                                  v-model = "col.list"
                                  style = "min-height: 50px;padding-bottom:10px;"
                                  v-bind = "{group: 'echarts_item', sort:true}"
                                  @add = "handleFormItemColAdd($event, el, colIndex)">
                                    <template>
                                      <BiItem v-for = "(el, is) in col.list" :key = "el.key"
                                      :element = "el" :select.sync = "selectFormItem" :index = "is" :data = "col"></BiItem>
                                    </template>
                                  </draggable>
                                </div>
                              </el-col>
                            </el-row>
                            <el-button title = "删除" style = "bottom: -20px;"
                            @click.stop = "handleFormTabsItemDelete(index, tabIndex, i)" class = "widget-action-delete"
                            v-if = "selectFormItem.key == el.key" circle plain type = "danger">
                              <i class = "iconfont icon-shanchu" ></i>
                            </el-button>
                          </div>
                        </template>
                        <template v-else>
                          <BiItem v-if = "el && el.key" :key = "el.key"
                          :element = "el" :select.sync = "selectFormItem" :index = "i" :data = "tabItem"></BiItem>
                        </template>
                      </template>
                    </draggable>
                  </el-tab-pane>
                </el-tabs>
                <el-button title = "删除" style = "bottom: -20px;"
                @click.stop = "handleFormItemDelete(index)" class = "widget-action-delete"
                v-if = "selectFormItem.key == element.key" circle plain type = "danger">
                  <i class = "iconfont icon-shanchu" ></i>
                </el-button>
              </div>
            </template>
            <template v-else>
              <BiItem v-if = "element && element.key"  :key = "element.key"
              :element = "element" :select.sync = "selectFormItem" :index = "index" :data = "formData"></BiItem>
            </template>
          </template>
        </draggable>
      </div>
    </div>
    <!-- 预览的界面 -->
    <BiPreview :previewSettings = 'previewSettings' :previewVisible = 'previewVisible'
    @closePreviewDialog = 'previewVisible = false'></BiPreview>
  </div>
</template>

<script src = './biSettings.js'></script>

<style lang = "scss" src = './biSettings.scss'></style>
